<template>
	<view class="box">
		<view class="tabsBox">
			<u-tabs :list="list1" @click="realTimeTabs" :scrollable="false" lineWidth="72rpx"></u-tabs>
		</view>
		<view style="padding-top: 40vh;" v-if="!repList[0]">
			<u-empty mode="list"></u-empty>
		</view>
		<view class="plr30 pb10 pt120">
			<view v-for="(item,index) in repList" :key="index">
				<!-- 1 -->
				<view class="boxItem mb20" v-if="item.type == 1" @click="agentClick(item.detail.id,0)">
					<view class="flex mb30">
						<view class="fs32">{{item.detail.workProjectName}}</view>
					</view>
					<view class="flex mb20">
						<view class="name w170">工作负责人：</view>
						<view class="value">{{item.detail.workPrName}}</view>
					</view>
					<view class="flex mb20">
						<view class="name w170">开始时间：</view>
						<view class="value">{{item.detail.begainDate}}</view>
					</view>
					<view class="flex mb20">
						<view class="name w170">结束时间：</view>
						<view class="value">{{item.detail.endTime}}</view>
					</view>
					<view class="flex mb20">
						<view class="name w170">作业地点：</view>
						<view class="value">{{item.detail.workLocation}}</view>
					</view>
					<view class="mtb20">
						<u-line color="#F5F6F9"></u-line>
					</view>
					<view class="flex flex-itemCenter">
						<image style="width: 28rpx;height: 28rpx;" src="../../static/agentTime.png"></image>
						<text class="time">{{item.detail.createTime}}</text>
					</view>
				</view>
				<!-- 2 -->
				<view class="boxItem mb20" v-if="item.type == 2" @click="agentClick(item.detail.id,1)">
					<view class="flex mb20">
						<view class="name w230">隐患标题：</view>
						<view class="value">{{item.detail.hiddenDangerTitle}}</view>
					</view>
					<view class="flex flex-itemCenter mb20">
						<view class="name w230">隐患所在单位：</view>
						<view class="value">{{item.detail.hiddenDangerUnitName}}</view>
					</view>
					<view class="flex flex-itemCenter mb20">
						<view class="name w230">隐患专业：</view>
						<view class="value">{{item.detail.hiddenDangerTypeDesc}}</view>
					</view>
					<view class="flex mb20">
						<view class="name w230">填报人所属单位：</view>
						<view class="value">{{item.detail.createUserUnitName}}</view>
					</view>
					<view class="flex mb20">
						<view class="name w230">隐患内容：</view>
						<view class="value">{{item.detail.hiddenDangerContent}}</view>
					</view>
					<view class="mtb20">
						<u-line color="#F5F6F9"></u-line>
					</view>
					<view class="flex flex-itemCenter">
						<image style="width: 28rpx;height: 28rpx;" src="../../static/agentTime.png"></image>
						<text class="time">{{item.detail.createTime}}</text>
					</view>
				</view>
				<!-- 3 -->
				<view class="boxItem mb20" v-if="item.type == 3" @click="agentClick(item.detail,2)">
					<view class="flex mb20">
						<view class="name w150">公告标题：</view>
						<view class="values">{{item.detail.noticeTitle}}</view>
					</view>
					<view class="flex mb20">
						<view class="name w150">公告内容：</view>
						<view class="values">{{item.detail.noticeContent}}</view>
					</view>
					<view class="mtb20">
						<u-line color="#F5F6F9"></u-line>
					</view>
					<view class="flex flex-itemCenter">
						<image style="width: 28rpx;height: 28rpx;" src="../../static/agentTime.png"></image>
						<text class="time">{{item.detail.createTime}}</text>
					</view>
				</view>
			</view>
		</view>
		<base-loading :flag="show" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				//tab栏
				list1: [{
					name: '全部',
					badge: {
						value: 0,
					}
				}, {
					name: '作业审批',
					badge: {
						value: 0,
					}
				}, {
					name: '隐患审批',
					badge: {
						value: 0,
					}
				}, {
					name: '公告待办',
					badge: {
						value: 0,
					}
				}],
				pageIndex: '1',
				pageSize: '10',
				// 总数
				total: 0,
				//tab栏下标
				tabsindex: 1,
				repList: [],
				//隐患的数组
				getDictsByCodeYHZY: []
			}
		},
		// 上拉刷新加载更多
		onReachBottom() {
			let total = this.total
			let repList = this.repList
			if (total > repList.length) {
				this.pageIndex++
				this.getBlocklogResultPageList()
			} else {
				return
			}

		},
		onShow() {
			this.repList = []
			this.total = 0
			this.pageIndex = 1
			// 统计
			this.getBlocklogStatistics()
			// 获取列表
			this.getBlocklogResultPageList()
		},
		methods: {
			async dict() {
				if (!this.getDictsByCodeYHZY[0]) {
					let data = {
						typeCode: "YHZY"
					} //隐患分类
					let {
						resultValue: res1
					} = await this.request(this.$api.getDictsByCode, data, "POST")
					this.getDictsByCodeYHZY = res1.items
					this.repList.forEach(item => {
						this.getDictsByCodeYHZY.forEach((i) => {
							if (item.detail.hiddenDangerTypeDesc == i.dicCode) {
								item.detail.hiddenDangerTypeDesc = i.dicName
							}
						})
					})
				} else {
					let data = {
						typeCode: "YHZY"
					} //隐患分类
					let {
						resultValue: res1
					} = await this.request(this.$api.getDictsByCode, data, "POST")
					this.getDictsByCodeYHZY = res1.items
					this.repList.forEach(item => {
						this.getDictsByCodeYHZY.forEach((i) => {
							if (item.detail.hiddenDangerTypeDesc == i.dicCode) {
								item.detail.hiddenDangerTypeDesc = i.dicName
							}
						})
					})
				}
			},
			// 获取数据总数信息
			getBlocklogStatistics() {
				let that = this
				let resobjNumber = ['allBLocklogNumber', 'workBLocklogNumber', 'hiddenDangerBLocklogNumber',
					'noticeBlocklogNumber'
				]
				that.request(that.$api.getBlocklogStatistics, 'GET').then((res) => {
					resobjNumber.forEach((item, index) => {
						this.list1[index].badge.value = res.resultValue[item]
					})
				})
			},
			// 获取数据
			getBlocklogResultPageList() {
				this.show = true
				let that = this
				let params = {
					pageIndex: this.pageIndex,
					pageSize: this.pageSize,
					pageType: this.tabsindex
				}
				that.request(that.$api.getBlocklogResultPageList, params, 'GET').then((res) => {
					if (res.code == 200) {
						// 后端返回的数据
						setTimeout(() => {
							this.show = false
							let rows = res.resultValue.items
							//  后端返回作业计划审批数据的总数
							that.total = res.resultValue.itemCount
							that.repList = that.repList.concat(rows)
							this.dict()
						}, 300)
					}
				})
			},
			//实时告警tab栏切换
			realTimeTabs(e) {
				if (this.tabsindex != e.index + 1) {
					uni.pageScrollTo({ //滚动条回到顶部
						scrollTop: 0,
						duration: 300
					})
					this.pageIndex = '1'
					this.repList = []
					this.total = 0
					this.tabsindex = e.index + 1
					this.getBlocklogResultPageList()
				}
			},
			agentClick(e, index) {
				let urlList = [
					'pagesB/programControl/JobApplication/JobApplication?id=',//作业审批
					'pagesB/investigate/assessmentInformation?hiddenDangerId=',//隐患审批
					'pagesA/fileAnnouncement/fileAnnouncement?data='//公告待办
				]
				let urlData = index == 2 ? JSON.stringify(e) : e
				let url = `../../${urlList[index] + urlData}`
				uni.navigateTo({
					url
				})
			},
		}
	}
</script>

<style scoped>
	.box {
		min-height: 100vh;
		background-color: #F1F2F5;
	}

	.tabsBox {
		box-sizing: border-box;
		height: 100rpx;
		position: fixed;
		width: 100%;
		background-color: #FFFFFF;
		z-index: 520;
	}

	>>>.u-tabs__wrapper__nav__item {
		padding: 0 15rpx !important;
	}

	>>>.u-tabs__wrapper__nav__item__text {
		font-size: 30rpx !important
	}

	>>>.u-badge--not-dot {
		padding: 4rpx 8rpx;
	}

	.boxItem {
		padding: 30rpx;
		background-color: #fff;
		box-shadow: 0 2px 4px 0 rgba(237, 237, 237, 0.50);
		border-radius: 16rpx;
	}

	.grade {
		text-align: center;
		width: 64rpx;
		border-radius: 4rpx;
		margin-right: 20rpx;
	}

	.w170 {
		width: 170rpx;
	}

	.w230 {
		width: 230rpx;
	}

	.w150 {
		width: 150rpx;
	}

	.name {
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #89939E;
		padding-right: 20rpx;
	}

	.value {
		flex: 1;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
	}

	.values {
		width: calc(100% - 150rpx);
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.time {
		margin-left: 10rpx;
		font-size: 24rpx;
		color: #939EA8;
	}
</style>
